<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>室内定位</title>
		<link rel="stylesheet" href="lib/bootstrap.min.css">
		<link rel="stylesheet" href="css/style.css">
		<script src="http://lib.baomitu.com/socket.io/2.0.1/socket.io.js"></script>
	</head>

	<body>
		<div id="fengMap"></div>
		<!--操作按钮-->
		<button class="btn btn-default navigation" id="navigation">开始导航</button>
		<!-- 视角按钮组 -->
		<div class="viewmode-group btn-group-vertical" data-toggle="buttons">
			<button class="btn btn-default">2D</button>
			<button class="btn btn-default btn-primary">3D</button>
		</div>

		<script src="lib/jquery-2.1.4.min.js"></script>
		<script src="lib/fengmap.min.js"></script>
		<script>
			//获取版本号,设置title
			document.title = '室内定位' + fengmap.VERSION;
			//定义全局map变量
			var map;
			var fmapID = 'location-test';
			var locationMarker;
			var navi;
			//楼层ID
			var lastGid = null;
			//第一人称、第三人称控制开关；定位跟随开关
			var others = true;
			var getData = {
				x: 14,
				y: 2
			}
			var layer = null

			//起点终点坐标
			var points = [{
					x: 13028218.4785,
					y: 4737039.7298,
					groupID: 1
				},
				{
					x: 13028218.4785,
					y: 4737009.7298,
					groupID: 1
				}
			];
			//坐标点下标
			var coordIndex = 0;
			window.onload = function() {
				map = new fengmap.FMMap({
					//渲染dom
					container: document.getElementById('fengMap'),
					//地图数据位置
					mapServerURL: './data/' + fmapID,
					//主题数据位置
					mapThemeURL: 'data/theme/',
					//设置主题
					defaultThemeName: '2001',
					// 默认比例尺级别设置为20级
					defaultMapScaleLevel: 22,
					//开启2维，3维切换的动画显示
					viewModeAnimateMode: true,
					//方向枚举型。可设置正南、正北、正东、正西、东南、西南等方向值。具体可参考fengmap.ControlsPoseEnum类。 NORTH WEST SOUTH EAST
					defaultControlsPose: fengmap.FMDirection.EAST,
					defaultViewMode: fengmap.FMViewMode.MODE_2D, //初始二维还是三维状态，三维状态为MODE_3D
					//开发者申请应用下web服务的key
					key: '670072019dff394f3f991e88e98024d5',
					//开发者申请应用名称
					appName: 'innerMap',
				});

				//打开Fengmap服务器的地图数据和主题
				map.openMapById(fmapID);

				//地图加载完成回调
				map.on('loadComplete', function() {
					addlocationMarker(points[0])
					//初始化导航对象
					navi = new fengmap.FMNavigation({
						map: map,
						// 设置导航线的样式
						lineStyle: {
							//设置线为导航线样式
							lineType: fengmap.FMLineType.FMARROW,
							lineWidth: 6,
							//设置线的颜色
							// godColor: '#FF0000',
							//设置边线的颜色
							// godEdgeColor: '#920000',
						}
					});

					// 地图加载完执行画导航路径
					createNavi(points);

					// 设置导航事件
					navi.on('walking', function(data) {
						//设置定位图标的旋转角度
						setLocationMakerPosition(data.point, data.angle);
					});
				});

				var aBtn = document.querySelectorAll('.viewmode-group .btn');
				//开启2维模式
				aBtn[0].onclick = function() {
					//设置地图为2维模式
					map.viewMode = fengmap.FMViewMode.MODE_2D;
					this.classList.add('btn-primary');
					aBtn[1].classList.remove('btn-primary');
				};

				//开启3维模式
				aBtn[1].onclick = function() {
					//设置地图为3维模式
					map.viewMode = fengmap.FMViewMode.MODE_3D;
					this.classList.add('btn-primary');
					aBtn[0].classList.remove('btn-primary');
				};

				//添加定位点图层
				function addlocationMarker(coord) {
					locationMarker = new fengmap.FMLocationMarker({
						//设置图片的路径
						url: 'image/pointer.png',
						//设置图片显示尺寸
						size: 46,
						//设置图片高度
						height: 1,
						direction: 45
					});
					//添加定位点标注
					map.addLocationMarker(locationMarker);
					//设置定位图标位置
					setLocationMakerPosition(coord);
					return locationMarker;
				};

				//设置图片标注点位置信息
				function setLocationMakerPosition(coord, angle) {
					var data = {
						//设置定位点的x坐标
						x: coord.x,
						//设置定位点的y坐标
						y: coord.y,
						//设置定位点所在楼层
						groupID: coord.groupID,
						time: .50,
						callback: function() {
							//回调函数
						},
						zOffset: 1
					};
					//设置定位图标旋转角度
					if(angle) {
						locationMarker.rotateTo(-angle);
						if(others) {
							map.rotateTo({
								to: angle,
								time: 1
							});
						}
					}
					//不同楼层
					if(lastGid !== coord.groupID) {
						lastGid = coord.groupID;
						locationMarker.setPosition(data);
					}
					locationMarker.moveTo(data);
					map.moveTo({
						x: coord.x,
						y: coord.y,
						groupID: coord.groupID,
						time: 1
					});
					locationMarker.direction = 45
				}

				// 点击计数
				var clickCount = 0;

				//判断起点是否是同一处坐标
				var lastCoord = null;

				function changeCoord(coordItem) {
					setTimeout(function() {
						if(coordIndex >= theCoord.length) {
							return;
						}
						var coordItem = theCoord[coordIndex];
						if(locationMarker.groupID != coordItem.groupID) {
							//展示对应楼层
							map.visibleGroupIDs = [coordItem.groupID];
							map.focusGroupID = coordItem.groupID;
						}
						if(!navi) return;
						navi.locate(coordItem);
						coordIndex++;
						changeCoord();
					}, 1000);
				}

				//开始导航
				$('#navigation').on('click', function() {
					console.log('aaa')
					//导航开始
					changeCoord();
				});
			};

			//创建导航路线
			function createNavi(coord) {
				if(!navi) {
					//初始化导航对象
					navi = new fengmap.FMNavigation({
						map: map,
						// locationMarkerUrl: 'image/pointer.png',
						//设置Marker尺寸
						// locationMarkerSize: 43,
						// 设置导航线的样式
						lineStyle: {
							// 导航线样式
							lineType: fengmap.FMLineType.FMARROW,
							// 设置线的宽度
							lineWidth: 6,
							//设置线的颜色
							// godColor: '#FF0000',
							//设置边线的颜色
							// godEdgeColor: '#920000',
						}
					});
					// 设置导航事件
					navi.on('walking', function(data) {
						//设置定位图标的旋转角度
						setLocationMakerPosition(data.point, data.angle);

						//显示导航展示信息
						cardInfo(data);
					});
				}

				//添加起点
				navi.setStartPoint({
					x: coord[0].x,
					y: coord[0].y,
					height: 2,
					groupID: coord[0].groupID,
					url: 'image/start.png',
					size: 32
				});

				//添加终点
				navi.setEndPoint({
					x: coord[1].x,
					y: coord[1].y,
					height: 2,
					groupID: coord[1].groupID,
					url: 'image/end.png',
					size: 32
				});

				// 画出导航线
				navi.drawNaviLine();
			};

			//如：定位坐标返回的坐标点
			var theCoord = [{
					x: 13028218.4785,
					y: 4737030.7298,
					groupID: 1
				},
				{
					x: 13028228.4785,
					y: 4737029.7298,
					groupID: 1
				},
//				{
//					x: 13028218.4785,
//					y: 4737028.7298,
//					groupID: 1
//				},
				{
					x: 13028218.4785,
					y: 4737011.7298,
					groupID: 1
				},
/*				{
					x: 13028228.4785,
					y: 4737029.7298,
					groupID: 1
				},*/
//				{
//					x: 13028218.4785,
//					y: 4737009.7298,
//					groupID: 1
//				}
			];
		</script>

	</body>

</html>